<template>
  <demo-section>
    <!-- 左字右字 -->
    <demo-block title="基础用法">
      <jam-cell :title="basicTitle" :content="inText" size="normal"></jam-cell>
    </demo-block>
    <demo-block title="透明底板">
      <jam-cell
        :title="basicTitle"
        :content="inText"
        size="normal"
        :transparent="true"
      ></jam-cell>
    </demo-block>
    <demo-block title="大单元格">
      <jam-cell :title="basicTitle" :content="inText" size="big"></jam-cell>
    </demo-block>
    <demo-block title="垂直居中效果">
      <jam-cell :content="inText" size="normal" center>
        <template #title>
          <div>单元格</div>
          <div style="color: #999; font-size: 10px">单元格下方描述内容</div>
          <div style="color: #999; font-size: 10px">单元格下方描述内容</div>
        </template>
      </jam-cell>
    </demo-block>
    <!-- 使用group -->
    <demo-block title="使用group">
      <jam-cell-group title="分组1">
        <template #icon>
          <i class="iconfont">&#xe601;</i>
        </template>
        <jam-cell
          :title="basicTitle"
          :content="inText"
          size="normal"
          :underline="'none'"
        ></jam-cell>
        <jam-cell
          :title="basicTitle"
          :content="inText"
          size="normal"
          :underline="'borderline'"
        ></jam-cell>
        <jam-cell
          :title="basicTitle"
          :content="inText"
          size="normal"
          :underline="'contentline'"
        ></jam-cell>
        <jam-cell
          :title="basicTitle"
          :content="inText"
          size="normal"
          :underline="'contentline'"
        ></jam-cell>
      </jam-cell-group>
    </demo-block>
    <!-- 使用插槽 -->
    <demo-block title="使用插槽">
      <jam-cell :title="basicTitle" :content="inText" size="normal">
        <template #left-icon>
          <i class="iconfont" style="margin-right: 3px">&#xe608;</i>
        </template>
      </jam-cell>
      <jam-cell :title="basicTitle" :content="inText" size="normal">
        <template #right-icon>
          <i class="iconfont" style="margin-right: 3px">&#xe608;</i>
        </template>
      </jam-cell>
      <jam-cell :content="inText" size="normal">
        <template #title>
          <div>单元格</div>
          <div style="color: #999; font-size: 10px">单元格下方描述内容</div>
        </template>
      </jam-cell>
      <jam-cell size="normal" title="单元格">
        <template #content>
          <div style="font-size: 15px; color: #333">右侧内容</div>
          <div style="font-size: 10px; color: #999">
            内容下方补充，自定义辅助内容
          </div>
        </template>
      </jam-cell>
    </demo-block>
    <!-- 使用箭头 -->
    <demo-block title="使用箭头">
      <jam-cell
        :title="basicTitle"
        :content="inText"
        size="normal"
        :arrow="'down'"
        @arrowEvent="fnDown"
      ></jam-cell>
      <jam-cell
        :title="basicTitle"
        :content="inText"
        size="normal"
        :arrow="'right'"
        @arrowEvent="fnDown"
      ></jam-cell>
    </demo-block>
  </demo-section>
</template>
<script>
import jamCellGroup from '../../cell-group/index.vue';
export default {
  data() {
    return {
      basicTitle: '单元格',
      inText: '右侧内容',
    };
  },
  component: {
    'jam-cell-group': jamCellGroup,
  },
  methods: {
    // 绑定arrowEvent事件，点击箭头会触发fn事件，传入点击后的arrow状态
    fnDown(arrowAfter, ev) {
      console.log('触发了箭头事件', arrowAfter, ev);
    },

  },
};
</script>
<style lang="less">
@import '../../pub_less/ali-font.less';
</style>